<!DOCTYPE html>
<html>
  <head>
    <link rel="icon" type="image/png" href="../../artwork/favicon.png">
    <title>PeersDeployGame
    </title>
    <link href="css/style.css" rel="stylesheet"/>
    <link href="css/bootstrap.min.css" rel="stylesheet"/>
    <script src="../../js/angular.min.js"></script>
    <script src="../../js/jquery.min.js"></script>
    <script src="app.js"></script>
  </head>
  <style>
    <style>
    .node {
    stroke: #fff;
  stroke-width: 1.5px;
}

.link {
  stroke: #999;
  stroke-opacity: .6;
}
  </style>
  </style>
<body>
  <center>
    <h1>Peers Deploy
    </h1>
    <h3>Have your own loklak peers with these one click deploy buttons
    </h3>
    <div ng-app="PeersCount" ng-controller="getPeersCount">
      <h4>{{data}}
      </h4>
    </div>
    <br>
    <div>
      </center>
    <div class="left">
      <div class="panel panel-default cardResize">
        <div class="panel-heading">Heroku Deployment
        </div>
        <div class="panel-body">
          <a href="https://www.heroku.com/deploy/?template=https://github.com/loklak/loklak_server">
            <img src="https://www.herokucdn.com/deploy/button.svg" alt="Deploy">
          </a>
        </div>
      </div>
      <div class="panel panel-default cardResize">
        <div class="panel-heading">Scalingo Deployment
        </div>
        <div class="panel-body">
          <a href="https://my.scalingo.com/deploy?source=https://github.com/loklak/loklak_server">
            <img src="https://cdn.scalingo.com/deploy/button.svg"
                 alt="Deploy on Scalingo"
                 data-canonical-src="https://cdn.scalingo.com/deploy/button.svg"
                 style="max-width:100%;">
          </a>
        </div>
      </div>
      <div class="panel panel-default cardResize">
        <div class="panel-heading">Bluemix deployment
        </div>
        <div class="panel-body">
          <a href="https://bluemix.net/deploy?repository=https://github.com/loklak/loklak_server">
            <img src="https://bluemix.net/deploy/button.png" alt="Deploy to Bluemix">
          </a>
        </div>
      </div>
      <div class="panel panel-default cardResize">
        <div class="panel-heading">Docker Deployment
        </div>
        <div class="panel-body">
          <a href="https://cloud.docker.com/stack/deploy/?repo=https://github.com/loklak/loklak_server">
            <img src="https://files.cloud.docker.com/images/deploy-to-dockercloud.svg"
                 alt="Deploy to Docker Cloud">
          </a>
        </div>
      </div>
      <div class="panel panel-default cardResize">
        <div class="panel-heading">Azure Deployment
        </div>
        <div class="panel-body">
          <a href="https://deploy.azure.com/?repository=https://github.com/loklak/loklak_server">
            <img src="https://azuredeploy.net/deploybutton.svg"
                 alt="Deploy to Azure">
          </a>
        </div>
      </div>
    </div>
    <div class="graph right">
    </div>
    </div>
  <script src="js/d3.v3.min.js">
  </script>
  <script src="../../js/d3-tip.min.js">
  </script>
  <script>
    var width = 640,
        height = 480;
    var color = d3.scale.category20();
    /* Initialize tooltip */
    tip = d3.tip().attr('class', 'd3-tip').html(function(d) {
      return d.name;
    });
    var url = 'http://localhost:9000/apps/oneClickDeploy/test.json';
    function getRandomInt(min, max) {
      return Math.floor(Math.random() * (max - min)) + min;
    }
    d3.json(url, function (json) {
      var nodes = [];
      var nodesByName = {
      };
      peersList = json.peers;
      loklakObject = {
        name:'api.loklak.org', x:0, y:0}
      nodes.push(loklakObject);
      count = getRandomInt(10,70);
      for (var i=0; i<peersList.length; i++) {
        peerObject = {
        }
        peerObject.name = peersList[i].host;
        peerObject.x = i*15+count;
        peerObject.y = i*-10+count;
        nodes.push(peerObject);
      }
      console.log(nodes);
      // We know that the center is always loklak.org, so consider loklak.org as source : 0
      var links = [];
      for (var i=0; i<peersList.length; i++) {
        linkObject = {
        }
        linkObject.source = 0;
        linkObject.target = i+1;
        links.push(linkObject);
      }
      var svg = d3.select('div.graph').append('svg')
      .attr('width', width)
      .attr('height', height);
      var force = d3.layout.force()
      .size([width, height])
      .nodes(nodes)
      .links(links);
      force.linkDistance(width/2);
      var link = svg.selectAll('.link')
      .data(links)
      .enter().append('line')
      .attr('class', 'link');
      /* Invoke the tip in the context of your visualization */
      svg.call(tip)
      var node = svg.selectAll('.node')
      .data(nodes)
      .enter().append('circle')
      .attr('class', 'node')
      .attr("r", 4.5)
      .style("fill", function (d) { return color(d.class); })
      .on('mouseover', tip.show)
      .on('mouseout', tip.hide)
      .call(force.drag);
      // Start the force layout.
      force
        .nodes(nodes)
        .links(links)
        .on("tick", tick)
        .start();
      function tick() {
        link.attr("x1", function(d) {
          return d.source.x;
        }
                 )
          .attr("y1", function(d) {
          return d.source.y;
        }
               )
          .attr("x2", function(d) {
          return d.target.x;
        }
               )
          .attr("y2", function(d) {
          return d.target.y;
        }
               );
        node.attr("cx", function(d) {
          return d.x;
        }
                 )
          .attr("cy", function(d) {
          return d.y;
        }
               );
      }
      function nodeByName(name) {
        return nodesByName[name] || (nodesByName[name] = {
          name: name}
                                    );
      }
    }
           );
  </script>
</body>
</html>
